<template>
  <div class="all_video">
    <go-back></go-back>
    <div>
      <mt-navbar v-model="videoParams.active" id="searchBar" :fixed="searchBarFixed">
        <mt-tab-item @click.native="getListFunc(item.diyname)" v-for="item in videoList" :key="item.diyname"
                     :id="item.diyname">{{item.name}}
        </mt-tab-item>
      </mt-navbar>
      <div>
        <keep-alive include>
          <mt-tab-container v-model="videoParams.active" :class="{margin_top:searchBarFixed === true}" :swipeable="false">
            <mt-tab-container-item v-for="item in videoList" :key="item.diyname" :id="item.diyname">
              <keep-alive>
                <video-han-nan :videoHaiNanList="videoHaiNanList.data"></video-han-nan>
              </keep-alive>
            </mt-tab-container-item>
          </mt-tab-container>
        </keep-alive>

      </div>
      <div v-show="videoHaiNanList.last_page !== 0">
        <div class="btnLoadMore" v-show="videoParams.page !== videoHaiNanList.last_page" @click="loadMore">
          点击加载更多
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import GoBack from '../../components/common/GoBack';
  import videoHanNan from '../../components/videoHaiNan/HaiNan';
  import {Navbar, TabItem, TabContainer, TabContainerItem, Cell,Indicator} from 'mint-ui';
  import {getChildVideo, getListVideo} from '../../axios/api';
  // import {getCityName} from '../../assets/js/cache';

  Vue.component(Navbar.name, Navbar);
  Vue.component(TabItem.name, TabItem);
  Vue.component(TabContainer.name, TabContainer);
  Vue.component(TabContainerItem.name, TabContainerItem);
  Vue.component(Cell.name, Cell);

  export default {
    name: 'AllVideo',
    data() {
      return {
        videoParams: {
          active: '',
          page: 1
        },
        videoList: [],
        searchBarFixed: false,
        videoHaiNanList: {},
        isMoreShow:true
      }
    },
    created() {
      this.getChildList();
      // console.log(getCityName().id)
    },
    // beforeRouteEnter(to, from, next) {
    //   console.log(from.name);
    //   if (from.name !== 'Index'){
    //     to.meta.keepAlive = true;
    //
    //   } else {
    //     to.meta.keepAlive = false;
    //   }
    //
    //   next();
    // },
    computed:{
      getVideo(){
          return this.$store.getters.getVideo;
      }
    },
    methods: {
      handleScroll() {
        // let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        let scrollTop = window.pageYOffset;
        // console.log(scrollTop);
        // let offsetTop = document.querySelector('#searchBar').offsetTop;
        if (scrollTop > 49) {
          this.searchBarFixed = true
        } else {
          this.searchBarFixed = false
        }
      },
      //获取初始数据 栏目分类 等
      getChildList() {
        let that = this;
        getChildVideo().then(res => {

          // Indicator.open({
          //   // text: '加载中...',
          //   spinnerType: 'snake'
          // });
          that.videoList = res.data;
          if(res.data){
            // this.$store.commit('setVideo',res.data[0].diyname);
            that.videoParams.active = that.getVideo;
            that.getVideoList();
          }

        }).catch(err => {
          console.log(err);
        })
      },
      // 获取视频列表(更改参数)
      getListFunc(value) {
        let that = this;
        that.videoParams.page = 1;
        // Indicator.open({
        //   // text: '加载中...',
        //   spinnerType: 'snake'
        // });
        that.$store.commit('setVideo',value);
        that.videoParams.active = that.getVideo;
        that.getVideoList();
      },
      //获取列表视频的方法
      getVideoList() {
        let that = this;
        getListVideo(that.videoParams).then(res => {
          that.videoHaiNanList = res.data;
          // Indicator.close();
        }).catch(err => {
          console.log(err);
        })
      },
      //加载更多
      loadMore(){
        let that = this;
        this.videoParams.page += 1;
        if (this.videoParams.page === that.videoHaiNanList.last_page) {
          //隐藏点击加载更多
          that.isMoreShow = false;
        }
        if (this.videoParams.page > that.videoHaiNanList.total) {
          return;
        }
        getListVideo(this.videoParams).then(res => {
          //添加数据进数组
          that.videoHaiNanList.data = [...that.videoHaiNanList.data, ...res.data.data];
        }).catch(err => {
          console.log(err);
        })
      }
    },
    mounted() {
      window.addEventListener('scroll', this.handleScroll)
    },
    components: {
      GoBack,
      videoHanNan
    }
  }
</script>

<style scoped>
  .all_video .mint-navbar {
    background-color: #e6191e;
    color: #ffffff;
    height: 40px;
    padding: 0 10px 10px 10px;
    font-size: 1rem;
  }

  .all_video .mint-tab-item {
    /*margin: 0 15px;*/
  }

  .all_video .mint-navbar .mint-tab-item.is-selected {
    color: #ffffff;
    border-bottom: 3px solid #ffffff;
  }

  .all_video .isFixed {
    position: fixed;
    background-color: #Fff;
    top: 0;
    z-index: 999;
  }

  .margin_top {
    margin-top: 50px;
  }
</style>
